var mhandle = new Class ({
    initialize: function(options)
    {
        this.options = options;
    },
    
    styles: function(obj, duration, waitTime)
    {
        return new Fx.Styles(obj,{duration:duration,wait:waitTime});
    }
});
mhandle.implement(new Options, new Events);

// JavaScript Document
var dd_slide = new Class(
{
    initialize: function(options)
    {
        /*
            menuId        - the ID of the menu to act upon
            cntClass    - the CSS class name of the dropdown menu
            sitemClass    - the CSS class name of each item within drop down menu
            menuIcon    - the CSS class name for the Icon to insert into menu items which have sub menu
            dfltIndex    - the default layer that's the menu content should be in
        */
        //initialize default menu handle (connector with mootool)
        this.effects = new mhandle();
        
        //set style for the menu in whole
        this.options = options;
        this.options.dfltIndex = parseInt(this.options.dfltIndex);
        this.options.radius = parseInt(this.options.radius);
        this.menu = $(this.options.menuId);
        
        //create background element, inject it and set style
        this.back = new Element('li').addClass(this.options.background);
        this.back.adopt(new Element('div').addClass(this.options.center));
        this.back.adopt(new Element('div').addClass(this.options.right));
        this.back.injectInside(this.menu);
        this.back.fx =  this.effects.styles(this.back,500,false);
        
        //set styles for other item
        this.menu.getChildren().each(function(item){
            if(item.className!='background' && !item.hasClass(this.options.sitemClass))
            {
                item.addEvents({
                    'mouseenter': function(event){ this.moveBackground(item); event.stopPropagation(); }.bind( this ),
                    'mouseleave': function(event){ this.returnBackground(this.current);}.bind( this )
                });
                var sItem = item.getChildren();
                if(sItem.length>1)
                {
                    sItem[1].addClass(this.options.cntClass);
                    sItem[1].style.display = 'none';
                    item.addEvents({
                    'mouseenter': function(event){ this.smenuShow(sItem[1], item); event.stopPropagation(); }.bind( this ),
                    'mouseleave': function(event){ this.smenuHide(sItem[1]); }.bind( this )
                    });
                    this.smenuAddStyles(sItem[1]);
                    this.addIcon(sItem[0]);
                }
                if (item.className == 'current')
                {
                    this.current = item;
                    this.setCurrent( this.current );
                }                
            }
        }.bind(this));
        this.menu.addEvents({
                'mouseleave': function(event){ this.moveBackground(this.current); event.stopPropagation(); }.bind( this )
        });
    },
    
    smenuAddStyles: function(el)
    {
        var sfx = new mhandle();
        el.getElements('li').each(function(item){
            
            item.fx = sfx.styles(item, 200, false);
            item.addClass(this.options.sitemClass);
            item.addEvents({
                'mouseenter': function(event){
                    item.fx.start({
                        'margin-left': 5,
                        'background-color': '#447cc0'
                    });
                    event.stopPropagation();
                }.bind( this ),
                'mouseleave': function(event){
                    item.fx.start({
                        'margin-left': 0,
                        'background-color': '#eef6ff'
                    });
                }.bind( this )
            });
            var tmp2 = item.getChildren();
            if(tmp2.length>1)
            {
                tmp2[1].style.display = 'none';
                tmp2[1].addClass(this.options.cntClass);
                item.addEvents({
                    'mouseenter': function(event){ this.smenuShow(tmp2[1], item); event.stopPropagation(); }.bind( this ),
                    'mouseleave': function(){ this.smenuHide(tmp2[1]); }.bind( this )
                });
                this.smenuAddStyles(tmp2[1]);
                this.addIcon(tmp2[0]);
            }
        }.bind(this));    
    },
    
    smenuShow: function(el, parEl)
    {
        el.setStyles({
            top: parEl.offsetTop,
            left: parEl.offsetLeft
        });
        el.style.display = 'block';
    },

    smenuHide: function(el)
    {
        el.style.display = 'none';
    },
    
    returnBackground: function(el)
    {
    },
    
    moveBackground: function(el)
    {
        if(!this.current) return;
        
        var tmp2 = this.back.getFirst();
        tmp2.setStyles({
            width: (el.offsetWidth - (this.options.radius))+'px'
        });
        this.back.setStyles({
            width: (el.offsetWidth)+'px'
        });
        this.back.fx.start({
            top: (el.offsetTop),
            left: (el.offsetLeft)
        });
    },
    
    setCurrent: function(el)
    {
        var tmp2 = this.back.getFirst();
        tmp2.setStyles({
            width: (el.offsetWidth - (this.options.radius))+'px'
        });
        this.back.setStyles({
            left: (el.offsetLeft)+'px',
            width: (el.offsetWidth)+'px'
        });
        this.current = el;
    },
    
    addIcon: function(obj)
    {
        obj.adopt(new Element('div').addClass(this.options.menuIcon));
    }
});
dd_slide.implement(new Options, new Events);